<template>
  <div class="app-container flex1 flex-col over-hidden product-property-list">
    <el-form class="flex-shrink-0">
      <el-form
        class="flex-shrink-0"
        :model="queryParams"
        ref="queryForm"
        :inline="true"
        label-width="100px"
      >
      <el-row :gutter="20">
         <el-col :span="6">
          <el-form-item label="客户名称" prop="declareCompany">
          <el-input
            v-model="queryParams.declareCompany"
            placeholder="请输入客户名称"
            clearable
            size="small"
            style="width:240px"
            @keyup.enter.native="handleQuery"
          />
            </el-form-item>
        </el-col>
        <el-col :span="6">
           <el-form-item label="保函编码" prop="purchaser">
          <el-input
            v-model="queryParams.purchaser"
            placeholder="请输入保函编码"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
            style="width:240px"
          />
        </el-form-item>
        </el-col>
        <el-col :span="6">
           <el-form-item label="审批人" prop="projectName">
          <el-input
            v-model="queryParams.projectName"
            placeholder="请输入审批人"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
            style="width:240px"
          />
        </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="创建日期" prop="createTime">
            <el-date-picker
              style="width:240px"
              size="small"
              v-model="queryParams.createTime"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="状态" prop="status">
              <el-select
                v-model="queryParams.status"
                placeholder="请选择状态"
                clearable
                size="small"
                style="width:240px"
              >
                <el-option
                  v-for="status in statusArr"
                  :key="status.dictValue"
                  :label="status.dictLabel"
                  :value="status.dictLabel"
                ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-form-item>
          <el-button
            type="primary"
            size="mini"
            @click="handleQuery"
          >
            查询
          </el-button>
        </el-form-item>
      </el-row> 
        
      </el-form>
    </el-form>
    <!-- 剩余空间通过 flex1 全部分给表格，over-hidden 必须使用 -->
    <div class="flex1 over-hidden">
      <el-table
        :data="showData"
        height="100%"
        v-loading="loading"
      >
        <el-table-column
          align="center"
          label="序号"
          prop="serialNumber"
        ></el-table-column>

        <el-table-column
          align="center"
          label="保函编码"
          prop="purchaser"
        ></el-table-column>

        <el-table-column
          align="center"
          label="客户名称"
          prop="declareCompany"
        ></el-table-column>

        <el-table-column
          align="center"
          label="交易平台"
          prop="planName"
        ></el-table-column>

        <el-table-column
          align="center"
          label="异常原因"
          prop="abnormalCause"
        ></el-table-column>

        <el-table-column
          align="center"
          label="创建时间"
          prop="createTime"
        ></el-table-column>

        <el-table-column
          align="center"
          label="审批人"
          prop="projectName"
        ></el-table-column>

        <el-table-column
          align="center"
          label="状态"
          prop="surrenderApproval"
        ></el-table-column>


        <el-table-column align="center" label="操作" width="200">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="toOrderDetail(scope.row)"
              >详情
            </el-button>
            <el-button
              type="text"
              size="small"
              @click="claimApproval(scope.row)"
              >退保审批
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-pagination
      class="text-center bgfff pd10 flex-shrink-0"
      layout="total, sizes, prev, pager, next, jumper"
      :current-page.sync="pageNum"
      :page-sizes="[10, 20, 30, 50]"
      :page-size.sync="pageSize"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :total="total"
    >
    </el-pagination>

    <el-dialog
          title="审批"
          :visible.sync="dialogVisible"
          width="30%"
        >
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="审批结果">
              <el-radio-group v-model="form.status">
                <el-radio label="通过"></el-radio>
                <el-radio label="不通过"></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="审批备注">
              <el-input type="textarea" v-model="form.desc"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false"
              >确 定</el-button
            >
          </span>
        </el-dialog>

  </div>
</template>

<script>
import { tableMixin } from "@/mixins/index";
import { dictFilter } from "@/utils/filters/common";
export default {
  mixins: [ tableMixin ],
  filters: { dictFilter },
  data() {
    return {
      total: 0,
      tableData: [
        {
          serialNumber: "1", // 序号
          purchaser: "SN45564545665", // 计划编号
          declareCompany: "张三", // 计划名称
          planName: "***有限公司", // 申报单位
          abnormalCause: "023535321212454", // 采购商
          status: "受理中", // 状态
          createTime: "25000", // 创建时间
          projectName: "深圳湾一号", // 项目名称
        },
        {
          serialNumber: "2", // 序号
          purchaser: "SN98645545665", // 计划编号
          declareCompany: "李四", // 计划名称
          planName: "***有限公司", // 申报单位
          abnormalCause: "542124478744545", // 采购商
          status: "已退保", // 状态
          createTime: "87000", // 创建时间
          projectName: "深圳湾二号", // 项目名称
        },
        {
          serialNumber: "3", // 序号
          purchaser: "SN12345545665", // 计划编号
          declareCompany: "王二", // 计划名称
          planName: "***有限公司", // 申报单位
          abnormalCause: "545645645645645", // 采购商
          status: "已拒绝", // 状态
          createTime: "36000", // 创建时间
          projectName: "深圳湾三号", // 项目名称
        }
      ],
      loading: false,
      tradeArr: [
        {
          dictValue: "01",
          dictLabel: "****公共资源交易中心",
        },
        {
          dictValue: "02",
          dictLabel: "****公共资源交易中心",
        },
        {
          dictValue: "03",
          dictLabel: "****公共资源交易中心",
        }
      ],
      statusArr: [
        {
          dictValue: "01",
          dictLabel: "全部",
        },
        {
          dictValue: "02",
          dictLabel: "受理中",
        },
        {
          dictValue: "03",
          dictLabel: "已退保",
        },
        {
          dictValue: "04",
          dictLabel: "已拒绝",
        },
      ],
      queryParams: {
        purchaser: "",
        declareCompany: "",
        status: "",
        tradeStatus: '',
        bhCode: '',
        deliveryTime: ''
      },
      orderData: null,
      showOrderDetail: false,
      showDeliveryForm: false,
      showData: [],

      dialogVisible:false,

      form:{
        status:'',
        desc:'',
      }
    };
  },
  created() {
    this.showData = this.tableData;
    const DATA = window.localStorage.getItem('TABLE_DATA') || '' ;
    if (DATA) {
      this.showData = JSON.parse(DATA);
      this.tableData = JSON.parse(DATA);
    }
  },
  computed: {
    // tableData() {
    //   return this.$store.state.products.propertyList;
    // },
  },
  methods: {
    getList() {},
    closeDialog(){
    },
    toOrderDetail(orderData){
        this.$router.push({
        name:'Order-detail',
        query:{
          serialNumber: orderData.serialNumber,
        },
      })
    },

    claimApproval(value){
        this.dialogVisible = true;
    },

    handleQuery () {
      if (this.queryParams.status == '全部' || this.queryParams.status == '') {
        this.showData = this.tableData
      }else {
        this.showData = this.tableData.filter(v => {
          return v.surrenderApproval == this.queryParams.status
        })
      }
    },
  },
};
</script>

<style scoped lang="scss">
.product-property-list {
  height: 100%;
  .opt-btn {
    padding: 20px;
  }
  .update-btn {
    padding-top: 20px;
    display: flex;
    justify-content: center;
  }
}
</style>
